<script setup>
import { onMounted, watch } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
  data: {
    type: Array,
    default: () => [
      { value: 40, name: '已处理', color: '#1a73e8' },
      { value: 35, name: '进行中', color: '#dc4e41' },
      { value: 25, name: '未处理', color: '#ffd700' }
    ]
  }
});

onMounted(() => {
  const chartDom = document.getElementById('pieChart');
  const myChart = echarts.init(chartDom);
  
  const getOption = (theme) => ({
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} ({d}%)',
      backgroundColor: 'var(--bg-primary)',
      borderColor: 'var(--border-color)',
      textStyle: {
        color: 'var(--text-primary)'
      }
    },
    series: [
      {
        type: 'pie',
        radius: ['60%', '80%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: theme === 'dark' ? 'var(--bg-primary)' : 'transparent',
          borderWidth: theme === 'dark' ? 2 : 0
        },
        label: {
          show: false,
          color: 'var(--text-primary)'
        },
        emphasis: {
          label: {
            show: false
          }
        },
        data: props.data.map(item => ({
          ...item,
          itemStyle: {
            color: item.color
          }
        }))
      }
    ]
  });

  const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
  myChart.setOption(getOption(currentTheme));

  watch(() => document.documentElement.getAttribute('data-theme'), (newTheme) => {
    myChart.setOption(getOption(newTheme));
  });

  window.addEventListener('resize', () => {
    myChart.resize();
  });
});
</script>

<template>
  <div id="pieChart" style="width: 100%; height: 100%;"></div>
</template> 